<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <meta charset="utf-8">
	<title>Bootstrap 实例 - 水平表单</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        .main {
            width: 30%;
        }
    </style>
</head>
<body>
	<center>
    <div class="main">
        <h3 class="text-center">12306登录</h3>
        <h6 class="text-center">登录后选择乘车人!首次登录需同步数据,时间较长,请耐心等候.</h6>

        <form class="form-horizontal" role="form" method="POST">
            {%csrf_token%}
            <div class="form-group">
        		<label for="firstname" class="col-sm-2 control-label">账号</label>
        		<div class="col-sm-10">
        			<input type="text" class="form-control" id="firstname" name="username" value="{{username}}"
        				   placeholder="请输入12306账号">
        		</div>

        	</div>
        	<div class="form-group">
        		<label for="firstname" class="col-sm-2 control-label">密码</label>
        		<div class="col-sm-10">
        			<input type="password" class="form-control" id="firstname" name="password"
        				   placeholder="请输入12306密码">

        		</div>

        	</div>
        	<div class="form-group">
        		<div class="col-sm-offset-2 col-sm-10">
                    <input type="submit"  value="登录" class="btn btn-default">
        		</div>
        	</div>
        </form>
        </div>
	</center>
	<script>
		{% if error %}
			alert("{{error}}");
            {% endif %}

	</script>
</body>
</html>